import * as React from "react";
import "~/pretty-checkbox/src/pretty-checkbox.scss";
import Radioitem from "./Radio";
const Checkbox = props => {
  const key = props["data-key"];
  const { node } = props;
  return (
    <div style={{ ...props.style }}>
      <RadioGroup
        name={key}
        node={node}
        {...props.attributes}
        className="pretty p-default"
      />
    </div>
  );
};

export function Radio(props) {
  const { node } = props;
  const key = props["data-key"];
  const datasource = node.data.get("datasource");
  return (
    <div>
      {datasource.value.map((option, index) => (
        <Radioitem name={key} key={`${key}${index}`} label={option} {...props} />
      ))}
    </div>);
}
export default Checkbox;
export class RadioGroup extends React.Component {
  render() {
    const key = this.props["data-key"];
    const { node } = this.props;
    const datasource = node.data.get("datasource");
    return (
      <div>
        {datasource.value.map((option, index) => (
          <Radioitem key={`${key}${index}`} label={option} {...this.props} />
        ))}
      </div>
    );
  }
}
